<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>这是一个测试网页</title>
    <style>
        *{margin:0; padding:0;}
        div{width:100px; height:100px; border:10px solid #bbccaa;line-height:100px;text-align: center;margin:20px;padding:20px;}
        .a1{margin-left:44%}
        .a2{margin-left:44%}
        
        .b1{border:10px solid #aabbcc;margin:60px auto 0; margin-left:44%;margin-top:40%}
        .b2{border:10px solid #bbaacc;float:left;margin-left:45%;position:relative;left:-100px;}
        .b3{border:10px solid #bbaaaa;float:left;position:relative; left:-100px;}

        .c1{border:10px solid #cccccc;float:left;margin-left:45%;position:relative;left:-100px; margin-top:40%}
        .c2{border:10px solid #111111;float:left;position:relative; left:-100px; margin-top:40%}
        .c3{border:10px solid #cccccc;float:left;margin-left:45%;position:relative;left:-100px;}
        .c4{border:10px solid #111111;float:left;position:relative; left:-100px;}
    </style>
</head>
<body>
    <div class="a1"></div>
    <div class="a2"></div>
    <div class="b1"></div>
    <div class="b2"></div>
    <div class="b3"></div>
    <div class="c1"></div>
    <div class="c2"></div>
    <div class="c3"></div>
    <div class="c4"></div>
</body>
</html>

